<template>
  <!-- 仓库管理 -->
    <zsearch v-loading="loading">
      <template #title>
        <span>仓库管理</span>
      </template>
      <template #date>
        <el-select 
          class="select-1" 
          v-model="showTypeName" 
          placeholder="全部分类" 
          ref="selectRefType"
          clearable
          @clear="clearTypeName"
          >
              <el-option
                style="height:300px; overflow-y:scroll"
                value=""
              >
                <el-tree
                    :props="defaultProps"
                    :data="treeData"
                    @node-click="handleNode"
                    >
                    </el-tree>
              </el-option>
          </el-select>
      </template>
      <template #select>
        <div class="f-d">
          <el-input class="input-1" v-model="name" placeholder="物品名称/常用名/品牌"></el-input>
          <el-checkbox v-model="haveZeroCount">包含0库存物品</el-checkbox>
          <el-checkbox v-model="onlyHighPrice">只显示高值耗材</el-checkbox>
          <el-checkbox v-model="onlyWarningCount">数量预警</el-checkbox>
        </div>
        
      </template>
      <template #btns>
        <el-button class="btn-1" @click="hanledSearch" v-jurisdiction="'warehouse:count:getGoodCountPage'">查询</el-button>
			  <el-button class="btn-2">导出</el-button>
      </template>
      <template #table>
        <ztable 
          :tableData='data' 
          :strucs='groupData'
          :btnData="btnData"
          :header-cell-style="{background:'#11b9d0', color:'#fff'}"
          :height="'100%'"
        ></ztable>
      </template>
      <template #page>
        <zpage
            :currentPage="current" 
            :total="total" 
            :pageSize="size"
            @handleSizeChange="handleSizeChange" 
            @handleCurrentChange="handleCurrentChange"
        ></zpage>
      </template>
    </zsearch>

    <zdialog title="盘点调整" @handleClose="closeDialog" v-model="dialogVisible" :btnData="dialogBtnData">
      <template #body>
			</template>
    </zdialog>
</template>

<script lang='ts'>
import ztable from '@components/Table/index.vue'
import zpage from '@components/pagination/pagination.vue'
import zsearch from '@components/search/search.vue'
import zdialog from '@components/dialog/dialog.vue'
import { debounce } from "../../utils/debounce"
import { getTypeTreeAPi } from "../../api/payservice"


import useConfgin from '../../hook/getconfig'
import useRequet, { RespData } from "../../hook/network"
import { ElMessage } from 'element-plus'

import { defineComponent, reactive, toRefs, ref } from 'vue'

const ID = 506;
export default defineComponent({
  name: 'Manage',
  components: {
    ztable,
    zpage,
    zsearch,
    zdialog
  },
  setup() {

    const {groupData} = useConfgin(ID)
    const request = useRequet({ path: "" });
    console.log(groupData)
    let search = reactive({
      name: '',
      typeId: null,
      options: [] as any,
      haveZeroCount: false,
      onlyHighPrice: false,
      onlyWarningCount: false,
      loading: false,

      current: 1,
      size: 10,
      total: 0
    })
    const data = ref([])
    
    const defaultProps = {
      children: 'children',
      label: 'name',
    }
    const selectRefType = ref()
    const tree = reactive({
      treeData: [],
      showTypeName: '',
    })

    const handleNode = (data: any) => {
      console.log(data)
      tree.showTypeName = data.name;
      search.typeId = data.id;
      
      selectRefType.value.blur()
    }

    const getTreeList = async() => {
      let res:any = await getTypeTreeAPi({})
      if(res.code !== 0) return ElMessage.error(res.msg || '获取物品分类树形图失败')
      tree.treeData = res.data
    }
    getTreeList()

    const clearTypeName = () => {
      search.typeId = null;
    }

    // 列表按钮组
    const btnData = [
      {
				// name: '盘点',
				// func: (data:object) => {
				// 	console.debug('盘点',JSON.parse(JSON.stringify(data)))
        //   dialogVisible.value = true
				// }
      }
    ]
    // 分页
    const handleCurrentChange = (val: number) => {
			search.current = val
      req()
			console.log('handleCurrentChange', val)
		}
    const handleSizeChange = (val: number) => {
      search.size = val
      req()
			console.log('handleSizeChange', val)
		}
    

    const req = () => {
      search.loading = true
      request.sendRequest({
        address: 'warehouse/count/getGoodCountPage',
        params: search || {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取仓库数据失败')
					data.value = resp.data.records
          search.total = resp.data.total
          search.current = resp.data.current

          search.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取仓库数据失败')
          
        },
        method: "POST",
      })
    }
    req()

    const debounceRefresh = debounce(req, 1000)
    //搜索
    const hanledSearch = () => {
      debounceRefresh()
    }

    const closeDialog = () => {
      dialogVisible.value = false
    }

    const dialogVisible = ref(false)

    const dialogBtnData = [
      {
        name: '取消',
				func: (data:object) => {
					console.debug('取消',JSON.parse(JSON.stringify(data)))
          dialogVisible.value = false
				}
      },
      {
        name: '保存',
        func: (data:object) => {
					console.debug('保存',JSON.parse(JSON.stringify(data)))

				}
      }
    ]

    
    return { 
      data, 
      groupData, 
      ...toRefs(search),
      btnData,
      hanledSearch,
      handleCurrentChange,
      handleSizeChange,

      ...toRefs(tree),
      defaultProps,
      selectRefType,
      handleNode,
      clearTypeName,

      request,

      dialogVisible,
      closeDialog,
      dialogBtnData,
    }
  }
})
</script>

<style lang="scss" scoped>
.f-d {
  display: flex;
  align-items: center;
  .input-1 {
    padding-right: 10px;
  }
}
</style>